import React, { Component } from 'react'
import "./mine/mine.css"
import { WalletOutlined,RightOutlined, AppstoreOutlined, BellOutlined, SettingOutlined, AccountBookOutlined } from '@ant-design/icons';

import { Link } from "react-router-dom"

import { mineName } from '../api/mine';


export default class Mine extends Component {
    constructor(){
      super()
      this.state={
        person:[
          {
            username:"晚上吃火锅",
            image:"https://img0.baidu.com/it/u=3686156064,2328177349&fm=26&fmt=auto&gp=0.jpg",
          }
        ]
      }
    }

  componentDidMount(){
    
    mineName({uid:sessionStorage.getItem("token")}).then(res=>{
      this.person = res
    })
  }
  render() {
    

    return (
      <div className="main">
        <header>
          <div className="set icons-list">

            <Link to="/news"><BellOutlined /></Link>
            <Link to="/set"><SettingOutlined /></Link>

          </div>
          <div className="Avatar_userName_to">
            <Link to="/person">
              <div className="Avatar_userName">
                <img src={this.state.person[0].image} alt="头像" className="Avatar" />
                <span>{this.state.person[0].username}</span>
              </div>
              <div className="arrow icons-list">
                <RightOutlined />
              </div>
            </Link>
          </div>
          <div className="want">
            <div className="iHave">
              <div>
                我有
              </div>
              <div className="icons-list">
                <span>0</span>
                <RightOutlined />
              </div>
            </div>
            <div>
              <Link to="/want">
                <div>
                  想要
                </div>
                <div className="icons-list">
                  <span>2</span>
                  <RightOutlined />
                </div>
              </Link>
            </div>
          </div>
        </header>
        <div className="MineBuyed">
          <h2>
            <Link className="MineBuy" to={{pathname:"/shopOrder",state:"5"}}>
              <div>
                购买
              </div>
              <div className="icons-list MineBuyHistory">
                <span>购买历史</span>
                <RightOutlined />
              </div>
            </Link>
          </h2>
          <div className="MineBuyList">
            <div className="MineBorderRight">
              <Link to={{pathname:"/shopOrder",state:"1"}}  >
                <div><AccountBookOutlined /></div>
                <span>求购中</span>
              </Link>
            </div>
            <div>
              <Link to={{pathname:"/shopOrder",state:"2"}}>
                <div><AccountBookOutlined /></div>
                <span>待付款</span>
              </Link>
            </div>
            <div>
              <Link to={{pathname:"/shopOrder",state:"3"}}>
                <div><AccountBookOutlined /></div>
                <span>待发货</span>
              </Link>
            </div>
            <div>
              <Link to={{pathname:"/shopOrder",state:"4"}}>
                <div><WalletOutlined /></div>
                <span>待收货</span>
              </Link>
            </div>
          </div>
        </div>
        <div className="beSeller">
          <div>
            成为卖家
          </div>
          <div className="icons-list MineHui">
            申请通过后，可在nice出售闲置商品
            <RightOutlined />
          </div>
        </div>

        {/* 账户------------ */}
        <div className="account">
          <h2>账户</h2>
          <div className="property">
            <div>
              <Link>
                <div className="propertyT">
                  <span>9</span>
                </div>
                余额
              </Link>
            </div>
            <div>
              <Link>
                <div className="propertyT">
                  <span>9</span>
                </div>
                卡卷
              </Link>
            </div>
            <div>
              <Link>
                <div className="propertyT">
                  申请
                </div>
                入驻商家
              </Link>
            </div>
          </div>
        </div>
        {/* 工具------------------ */}
        <div className="instrument">
          <h2>
            工具
          </h2>
          <div className="MineInstrument">

            <div>
              <Link>
                <div>
                  <AppstoreOutlined />
                </div>
                <span>预售担保</span>
              </Link>
            </div>
            <div>
              <Link>
                <div>
                  <AppstoreOutlined />
                </div>
                <span>调货工具</span>
              </Link>
            </div>
            <div>
              <Link>
                <div>
                  <AppstoreOutlined />
                </div>
                <span>打包卖</span>
              </Link>
            </div>
            <div>
              <Link>
                <div>
                  <AppstoreOutlined />
                </div>
                <span>鉴别服务</span>
              </Link>
            </div>
            <div>
              <Link>
                <div>
                  <AppstoreOutlined />
                </div>
                <span>直播</span>
              </Link>
            </div>
            <div>
              <Link>
                <div>
                  <AppstoreOutlined />
                </div>
                <span>好友动态</span>
              </Link>
            </div>
            <div>
              <Link>
                <div>
                  <AppstoreOutlined />
                </div>
                <span>帮助中心</span>
              </Link>
            </div>
            <div>
              <Link>
                <div>
                  <AppstoreOutlined />
                </div>
                <span>好货设置</span>
              </Link>
            </div>
            <div>
              <Link>
                <div>
                  <AppstoreOutlined />
                </div>
                <span>预约顺丰</span>
              </Link>
            </div>
          </div>
        </div>

      </div>

    )
  }
}

